<template>
    <div>
        <el-card shadow="never" class="box-card search_head" style="margin-bottom: 15px;">
            <el-button size="small" @click="toAdd" type="primary">新增用户</el-button>
        </el-card>
        <div class="container">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="phone" label="电话">
                </el-table-column>
                <el-table-column prop="roleName" label="职称">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button v-if="self._id != scope.row._id && self.level<= scope.row.level" @click="toDel(scope.row)" style="color: #F56C6C;" type="text" size="small">删除</el-button>
                        <!-- <el-button @click="toUpdate(scope.row)" type="text" size="small">编辑</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin-top: 5px;" @size-change="getData" @current-change="getData" :current-page.sync="pages.page"
                :page-sizes="[10, 20, 100]" :page-size.sync="pages.size"
                layout="total, sizes, prev, pager, next, jumper" :total="pages.total">
            </el-pagination>
            <el-dialog title="用户信息" center width="400px" :visible.sync="dialogFormVisible">
              <el-form :model="form" label-width="80px">
                  <el-form-item label="姓名" required>
                    <el-input size="small" class="w300" v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="职称" >
                    <el-input size="small" class="w300" v-model="form.roleName"></el-input>
                  </el-form-item>
                  <el-form-item label="电话" required>
                    <el-input size="small" placeholder="用于登录" class="w300" v-model="form.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" required>
                    <el-input size="small" type="password" class="w300" v-model="form.password"></el-input>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button @click="save" type="primary" >保 存</el-button>
              </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import ajax from '@/ajax';
    export default {
        name: 'user',
        data() {
            let self = JSON.parse(localStorage.getItem('user'))
            return {
                self:self,
                dialogFormVisible:false,
                methodType:"post",
                form:{
                    name:"",
                    roleName:"",
                    phone:"",
                    password:"",
                    level:1
                },
                defaultForm:null,
                pages: {
                    page: 1,
                    size: 10,
                    total: 0
                },
                tableData: []
            }
        },
        created() {
            this.defaultForm = JSON.parse(JSON.stringify(this.form)) 
            this.getData()
        },
        methods: {
            getData() {
                let skip = (this.pages.page - 1)*this.pages.size
                let limit = this.pages.size
                ajax('user',{
                    skip,
                    limit
                },'get').then(res=>{
                    // console.log(res)
                    this.tableData = res.content
                    this.pages.total = res.count
                })
            },
            toDel(row){
                this.$confirm('确定删除该用户？', '提示', {
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                          type: 'warning'
                }).then(() => {
                    ajax('user',{
                        _id:row._id
                    },"delete").then(res=>{
                        this.$message.success("删除成功")
                        this.getData()
                    })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
            },
            toAdd(){
                this.form = JSON.parse(JSON.stringify(this.defaultForm))
                this.methodType = "post"
                this.dialogFormVisible = true
            },
            toUpdate(row){
                this.form =  JSON.parse(JSON.stringify(row))
                this.methodType = "put"
                this.dialogFormVisible = true
            },
            save(){
                if(!this.form.name){
                    this.$message.error("姓名为必填")
                    return
                }
                if(!this.form.phone){
                    this.$message.error("电话为必填")
                    return
                }
                if(!this.form.password){
                    this.$message.error("密码为必填")
                    return
                }
                ajax('user',this.form,this.methodType).then(res=>{
                    console.log(res)
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    if(this.methodType==='post'){
                        this.pages.page = 1
                    }
                    this.getData()
                })
            },
        }
    }
</script>

<style scoped>
</style>
